{% extends "basex.html" %}

{% block topbuttons %}
    <a href="javascript:javascript:history.go(-1)"
       data-icon="arrow-l"
       data-iconpos="notext">Back</a>
    <a href="/?rnd={{ rnd }}"
       data-icon="home"
       data-iconpos="notext">Home</a>
{% endblock %}

{% block collaps %}
    <h1>About Solution Tree</h1>
    <br>
    <div class="help">
        <b>Solution Tree</b> is an innovative tool to collectively solve problems, that doesn't have existing solution variants and may be too complex for one person to solve. 
        <br><br>You can submit some <b>step</b>, which may lead to solution. Other person can do a next step after yours. There may be a lot of step variants from one's step.
        <br><br>All this forms a collectively created <b>tree</b> and some <b>branches</b> reach valid solutions.
    </div>
{% endblock %}

{% block content %}
    <br>
    <h2 style="margin-top: 0px;margin-bottom: 4px;">Solution way</h2>
    <div class="tip">Question:
        <a href="/tree?id={{ quest.key }}&node={{ quest.key }}&rnd={{ rnd }}">View</a>
        {% if quest.childs > 1 %}
            <font color="black">
                <b>{{ quest.childs }}</b> branches</font>
        {% endif %}
    </div>
    <div class="quest">{{ quest.text|linebreaksbr }}</div>
    <br>
    <div class="indent">
        {% if way %}
            {% for node in way %}
                <div class="tip" style="margin-top: 9px; margin-bottom: 5px;">
                    {% if forloop.first %}
                        Start
                    {% else %}
                        then
                    {% endif %}
                </div>
                <div class="tip">
                    <a href="/tree?id={{ quest.key }}&node={{ node.key }}&rnd={{ rnd }}">View</a>
                    {% if node.childs > 1 %}<font color="black"><b>{{ node.childs }}</b> branches</font>&nbsp;
                        &nbsp;{% endif %}
                    {% if node.like %}Good <font color="#377de6">{{ node.like }}%</font>&nbsp;&nbsp;{% endif %}
                    {% if node.bad %}Wrong <font color="Red">{{ node.bad }}%</font>&nbsp;&nbsp;{% endif %}
                    {% if node.imps %}Views <font color="Black">{{ node.imps }}</font>&nbsp;&nbsp;{% endif %}
                </div>
                <div class="state">{{ node.text|linebreaksbr }}</div>
            {% endfor %}
            <br><br>
        {% else %}
            <h1><font color="grey">No solution steps</font></h1><br>
        {% endif %}

        <form action="/add?type=node&id={{ quest.key }}&previous={% if node %}{{ node.key }}{% else %}{{ quest.key }}{% endif %}&rnd={{ rnd }}"
              method="post">
            <b>Add next solution step:</b>
            <textarea name="text" rows="7" cols="60"></textarea><br>
            <input type="submit"
                   value="Add solution step"
                   data-theme="b"
                   data-inline="true"
                   data-icon="check">
        </form>
    </div>
{% endblock %}